<template>
	<view class="authorization">
		<view class="authorization-box">
		<view class="top">
			选择委托类型
		</view>
		<view class="center-list">
			<view v-for="item in centerList" :key="item.index">
				<navigator :url="item.url"  class="center-item">
				<view class="item-left">
				  <icon-svg :icon-class="item.type"/>
				</view>
			<view class="item-center">
				<view>
					{{item.title}}
				</view>
			</view>
			<view class="item-right">
				<uni-icons color="#7FC9D1" size="16" type="arrowright" />
			</view>
			</navigator>
		 </view>
		</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniIcons
		},
		data(){
			return{
				centerList:[
					{url:'./autReimbursement',type:'jilu1',title:'委托报销'},
					{url:'./autApply',type:'luru-xianxing',title:'委托申请'},
					{type:'wenti-shuben',title:'委托借款'},
					{type:'dingdan',title:'委托审批'},
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.authorization{
		background-color: #fff;
	  .authorization-box{
		  position: absolute;
		  top: 20rpx;
		  right: 0;
		  left: 0;
		.svg-icon{
			color:#7FC9D1;
			font-size: 1.2em;
		}
		.top{
			padding: 20rpx ;
			background-color:#F8F8F8 ;
			font-size: 50rpx;
		}
	.center-list{
		 background: #fff;
		.center-item{
		  display: flex;
		  justify-content: space-between;
		  line-height: 90rpx;
		  height: 90rpx;
		  border-bottom:1px solid #F9FAF9 ;
		   .item-left{
			  .svg-icon{
				  color:#7FC9D1;
				  font-size: 1.2em;
			  }
			  margin-left: 20rpx;
			  width: 10%; 
		   }
		  .item-center{
		  	width: 70%;
			margin-left: 20rpx;
		  }
		  .item-right{
			text-align: right;
		  	width: 20%;
			.svg-icon{
			color: #D1D6D9;
			margin-right: 10rpx;
			}
		  }
		}
		}
		}
	}
</style>
